<template>
    <el-container>
        <el-header style="background: #F7F7F7; padding: 0; height: 50px">
            <div>
                <div style="padding-top: 10px; margin-left: 10px;">
                    <el-button
                        type="primary"
                        size="medium"
                        icon="folder-add"
                        :title="isSuperuser ? '添加项目' : '权限不足，请联系管理员'"
                        :disabled="!isSuperuser"
                        @click="dialogVisible = true"
                    >
                        添加项目
                    </el-button>
                    <el-button type="success" size="medium" icon="data-line" @click="dashBoardVisible = true">
                        项目看板
                    </el-button>

                    <el-button
                        style="margin-left: 50px"
                        type="info"
                        round
                        size="medium"
                        icon="d-arrow-left"
                        :disabled="projectData.previous === null"
                        @click="getPagination(projectData.previous)"
                    >
                        上一页
                    </el-button>

                    <el-button
                        type="info"
                        round
                        size="medium"
                        :disabled="projectData.next === null"
                        @click="getPagination(projectData.next)"
                    >
                        下一页&nbsp;&nbsp;
                        <el-icon><DArrowRight /></el-icon>
                    </el-button>
                    <!-- 添加项目 -->
                    <el-dialog title="添加项目" v-model="dialogVisible" width="30%" align="center">
                        <el-form
                            :model="projectForm"
                            :rules="rules"
                            ref="projectForm"
                            label-width="150px"
                            class="project"
                        >
                            <el-form-item label="项目名称" prop="name">
                                <el-input v-model="projectForm.name" clearable></el-input>
                            </el-form-item>

                            <el-form-item label="项目描述" prop="desc">
                                <el-input v-model="projectForm.desc" clearable></el-input>
                            </el-form-item>

                            <el-form-item label="负责人" prop="responsible">
                                <el-select
                                    v-model="projectForm.responsible"
                                    placeholder="请选择项目负责人"
                                    filterable
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in responsibleOptions"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="closeAddDialog">取 消</el-button>
                            <el-button type="primary" @click="handleConfirm('projectForm')">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </el-header>
        <!-- 项目看板 -->
        <el-drawer
            style="margin-top: 10px"
            :destroy-on-close="true"
            :with-header="false"
            :modal="true"
            size="89%"
            v-model="dashBoardVisible"
        >
            <ProjectDashBoard></ProjectDashBoard>
        </el-drawer>

        <el-container>
            <el-main style="padding: 0; margin-left: 10px">
                <el-table 
                highlight-current-row
                border
                stripe
                :show-header="projectData.results.length > 0"
                style="width: 100%;"
                :data="projectData.results" >
                <el-table-column label="操作" min-width="480" align="center">
                    <template #default="{row}">
                        <el-button size="medium" type="primary" @click="handleCellClick(row)">进入</el-button>
                        <el-button type="primary" size="medium" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="danger" size="medium" @click="handleDelete(row)">删除</el-button>
                    </template>
                    </el-table-column>
                    <el-table-column label="项目名" prop="name" type="primary" min-width="180">
                    <template #default="{row}">
                        <span style="color: #b57aec; font-weight:bold; " @click="handleCellClick(row)">{{ row.name }}</span>
                    </template>
                    </el-table-column>
                    <el-table-column label="负责人" prop="responsible" min-width="180" ></el-table-column>
                    <el-table-column label="项目描述" prop="desc" min-width="180"></el-table-column>
                    <el-table-column label="最近更新人" prop="updater" min-width="180"></el-table-column>
                    <el-table-column
                            label="更新时间"
                            width="180"
                        >
                            <template #default="scope">
                                <div>{{ $datetimeFormat(scope.row.update_time) }}</div>

                            </template>
                        </el-table-column>

                </el-table>     
            </el-main>
        </el-container>
        <el-dialog title="编辑项目" v-model="editVisible" width="30%">
                                    <el-form :model="projectForm" :rules="rules" ref="projectForm" label-width="150px">
                                        <el-form-item label="项目名称" prop="name">
                                            <el-input v-model="projectForm.name" clearable></el-input>
                                        </el-form-item>
                                        <el-form-item label="项目描述" prop="desc">
                                            <el-input v-model="projectForm.desc" clearable></el-input>
                                        </el-form-item>
                                        <el-form-item label="负责人" prop="responsible">
                                            <el-select
                                                v-model="projectForm.responsible"
                                                placeholder="请选择项目负责人"
                                                filterable
                                                clearable
                                                :style="{ width: '100%' }"
                                            >
                                                <el-option
                                                    v-for="(item, index) in responsibleOptions"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.value"
                                                    :disabled="item.disabled"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <template #footer>
                                        <span  class="dialog-footer">
                                            <el-button @click="closeEditDialog">取 消</el-button>
                                            <el-button type="primary" @click="handleConfirm('projectForm')">确 定</el-button>
                                        </span>
                                    </template>
                            </el-dialog>
    </el-container>
</template>

<script>
import ProjectDashBoard from './ProjectDashBoard'
import axios from 'axios'
export default {
    components: {
        ProjectDashBoard
    },
    data() {
        return {
            isSuperuser: this.$store.state.is_superuser,
            userName: this.$store.state.user,
            dialogVisible: false,
            dashBoardVisible: false,
            editVisible: false,
            projectData: {
                results: []
            },
            projectForm: {
                id: '',
                name: '',
                desc: '',
                responsible: this.$store.state.user,
            },
            responsibleOptions: [],
            rules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '最多不超过50个字符', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '简要描述下该项目', trigger: 'blur' },
                    { min: 1, max: 100, message: '最多不超过100个字符', trigger: 'blur' }
                ],
                responsible: [
                    {
                        required: true,
                        message: '请选择项目负责人',
                        trigger: 'change'
                    }
                ],
            }
        }
    },
    methods: {
        handleCellClick(row) {
            this.$store.commit('setRouterName', 'ProjectDetail')
            this.$store.commit('setProjectName', row.name)
            sessionStorage.setItem('routerName', 'ProjectDetail')
            // 在vuex严格模式下, commit会经过mutation函数不会报错, set直接修改会报错
            sessionStorage.setItem('projectName', row.name)
            this.$router.push({ name: 'ProjectDetail', params: { id: row['id'] } })
        },
        handleEdit(row) {
            if (!(this.isSuperuser || this.userName === row.responsible)) {
                this.$message.error({
                    message: '权限不足，请联系管理员',
                    duration: this.$store.state.duration
                })
                return
            }

            this.editVisible = true
            this.projectForm.name = row['name']
            this.projectForm.desc = row['desc']
            this.projectForm.responsible = row['responsible']
            this.projectForm.id = row['id']
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除'+row.name+'项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.deleteProject({ data: { id: row['id'] } }).then(res => {
                    if (res['success']) {
                        this.success(res)
                        this.getProjectList()
                    } else 
                    {
                        this.failure(res)
                    }
                })
            }).catch(()=>{})
        },
        handleConfirm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.dialogVisible = false
                    this.editVisible = false
                    let obj

                    if (this.projectForm.id === '') {
                        obj = this.$api.addProject(this.projectForm)
                    } else {
                        obj = this.$api.updateProject(this.projectForm)
                    }
                    
                    obj.then(res => {
                        console.log(res)
                        if (res['success']) {
                            this.success(res)
                            this.getProjectList()
                        } else {
                            this.failure(res)
                        }
                        this.resetProjectForm()
                    })
                } else {
                    if (this.projectForm.id !== '') {
                        this.editVisible = true
                    } else {
                        this.dialogVisible = true
                    }
                    return false
                }
            })
        },
        success(res) {
            this.$notify({
                message: res['msg'],
                type: 'success',
                duration: this.$store.state.duration
            })
        },
        failure(res) {
            this.$notify.error({
                message: res['msg'],
                duration: this.$store.state.duration
            })
        },
        getProjectList() {
            this.$api.getProjectList().then(res => {
                this.projectData = res
            })
        },
        getPagination(url) {
            this.$api.getPagination(url).then(res => {
                this.projectData = res
            })
        },
        closeEditDialog() {
            this.editVisible = false
            this.resetProjectForm()
        },
        closeAddDialog() {
            this.dialogVisible = false
            this.resetProjectForm()
        },
        resetProjectForm() {
            this.projectForm.name = ''
            this.projectForm.desc = ''
            this.projectForm.responsible = ''
            this.projectForm.id = ''
        },
        getUserList() {
            this.$api.getUserList().then(res => {
                for (let i = 0; i < res.length; i++) {
                    this.responsibleOptions.push({ label: res[i].username, value: res[i].username })
                }
            })
        }
    },
    created() {
        this.getProjectList()
        this.getUserList()
    },
    name: 'ProjectList'
}
</script>

<style scoped>

</style>
